<template>
  <div class="status_bar">
    <div class="status_info">
      <span style="width: 285px"
        >相机位置:{{ statusInfo.position[0].toFixed(5) }},{{ statusInfo.position[1].toFixed(5) }},{{
          statusInfo.position[2].toFixed(2)
        }}</span
      >
      <span style="width: 110px"> 偏航角:{{ statusInfo.rotation[0].toFixed(2) }}°</span>
      <span style="width: 110px"> 俯仰角:{{ statusInfo.rotation[1].toFixed(2) }}° </span>
      <span style="width: 270px"
        >{{
          realTimeInfo
            ? `鼠标位置:${realTimeInfo[0].toFixed(5)},${realTimeInfo[1].toFixed(5)},${realTimeInfo[2].toFixed(2)}`
            : '暂时无法获取鼠标位置...'
        }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue'
import { getobjm } from '../../utils/getobjm.js'
import { createAnimateFrameWithStartValues } from 'xbsj-base'
const objm = getobjm()
const statusInfo = ref({ position: [0, 0, 0], rotation: [0, 0, 0] })
const realTimeInfo = ref()
let dispose
let animateFrame
const debugData = async () => {
  const viewer = objm.activeViewer // 当前管理器内活跃的/激活的视口
  if (!viewer) return
  const cameraInfo = await viewer.getCurrentCameraInfo() //获取当前视角信息。
  if (cameraInfo && cameraInfo.position && cameraInfo.rotation) {
    statusInfo.value.position = cameraInfo.position
    statusInfo.value.rotation = cameraInfo.rotation
  }
}

const viewePosRot = () => {
  const viewer = objm.activeViewer
  if (!viewer) return
  // disposableOn 事件监听，返回一个回调函数，调用该回调函数，会自动取消监听
  // don 作用和disposableOn一样，只是简写形式。
  dispose = viewer.hoverEvent.disposableOn((res) => {
    viewer.pickPosition(res.screenPosition).then((res1) => {
      realTimeInfo.value = res1
    })
  })
}
const destroy = () => {
  if (animateFrame) {
    animateFrame.destroy()
    animateFrame = undefined
  }
  if (dispose) {
    dispose()
    dispose = undefined
  }
}

onMounted(() => {
  debugData()
  animateFrame = createAnimateFrameWithStartValues(debugData)
  animateFrame.start()
  viewePosRot()
  // animateFrame = createAnimateFrameWithStartValues(viewePosRot)
  // animateFrame.start()
  objm.dispose(
    objm.activeViewerChanged.disposableOn((res) => {
      destroy()
      debugData()
      animateFrame = createAnimateFrameWithStartValues(debugData)
      animateFrame.start()
      viewePosRot()
    }),
  )
})
onBeforeUnmount(() => {
  destroy()
})
</script>

<style lang="scss" scoped>
.status_bar {
  width: 100%;
  position: fixed;
  height: 1.5625vw /* 30px -> 1.5625vw */;
  left: 0;
  bottom: 0;
  color: #fff;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5625vw /* 30px -> 1.5625vw */;
  z-index: 100;
  display: flex;
  align-content: center;
  justify-content: space-between;
  background: rgba(37, 38, 42, 0.8);
  font-size: 0.7292vw /* 14px -> .7292vw */;
  border: 1px solid rgba(180, 180, 180, 1);
  .status_info {
    display: flex;
    span {
      height: 100%;
      text-align: center;
      border-right: 1px solid rgba(180, 180, 180, 1);
    }
  }
}
</style>
